<!--
 * @Description: 标注菜单页面
 * @Author: 程前
 * @Date: 2024-12-02 14:02:21
 * @LastEditors: 程前
 * @LastEditTime: 2025-01-20 15:05:28
-->

<template>
    <div class="plotting-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="矢量标绘" name="first">
                <div class="vector-container">
                    <div :class="currentItem === item.img + 'svg' ? 'container-items active' : 'container-items'"
                        v-for="item in assetList" :key="item.name" @click="itemClick(item, 'svg')">
                        <img class="img" :src="getAssetsFile(`cesium/plotting/${item.img}.svg`)">
                        <div>{{ item.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="图片标绘" name="second">
                <div class="img-container">
                    <div :class="currentItem === item.img + 'png' ? 'container-items active' : 'container-items'"
                        v-for="item in assetList" :key="item.name" @click="itemClick(item, 'png')">
                        <img class="img" :src="getAssetsFile(`cesium/plotting/${item.img}.png`)">
                        <div>{{ item.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus'
import { ref, nextTick } from 'vue'
import { getAssetsFile, clearLoader, eventBus } from "@/utils"
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { useCesiumEditStore } from "@/store/modules/cesium-edit";
import { Plotting } from "@/loader"

/**
 * 基本数据
 */
const cesiumEditStore = useCesiumEditStore()
const cesiumGlobalStore = useCesiumGlobalStore()
const assetList = [{
    name: '靶场',
    img: 'bachang'
},
{
    name: '仓库',
    img: 'cangku'
},
{
    name: '船厂',
    img: "chuanchang"
}
]


/**
 * tabs切换
 * @param tab 
 * @param event 
 */
const activeName = ref<string>('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
}

/**
 * 选择标绘
 */
const currentItem = ref<string | null>(null)
const itemClick = (item: any, type: string) => {
    currentItem.value = currentItem.value === item.img + type ? null : item.img + type
    if (!currentItem.value) {
        const loader = cesiumGlobalStore.loader
        loader && loader.destroy()
    } else {
        clearLoader()
        const viewer = cesiumGlobalStore.getViewer()
        const imgSrc = getAssetsFile(`cesium/plotting/${item.img}.${type}`);
        let configType: string;
        //设置编辑标绘数据
        if (type === 'png') {
            configType = 'image'
            cesiumEditStore.plotting.imageConfig.name = item.name
        } else {
            configType = 'vector'
            cesiumEditStore.plotting.vectorConfig.name = item.name
        }
        cesiumEditStore.plotting.type = configType
        cesiumEditStore.plotting.src = imgSrc
        cesiumGlobalStore.loader = new Plotting(viewer)
        nextTick(() => {
            eventBus.emit('edit-config-plotting');
        })
    }
}
</script>

<style scoped lang="less">
.plotting-container {
    width: 100%;
    height: 100%;
    background-color: #fff;


    .vector-container,
    .img-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 260px;
        height: 300px;
        overflow: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;

        &::-webkit-scrollbar {
            display: none;
        }

        .container-items {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100px;
            height: 100px;
            padding: 6px 12px;
            cursor: pointer;
            border: 1px solid transparent;
            margin-top: 2px;

            .img {
                width: 82px;
                height: 70px;
            }
        }

        .active {
            border: 1px solid #298fe9;
        }
    }
}
</style>